<template>
  <div class="div_1">
    <!-- 头部标题栏 -->
    <mt-header title="商品详情" fixed class="p_tou">
      <router-link to="/renewindex/renew" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <!-- 轮播图 -->
    <mt-swipe
      class="p_swipe"
      style="
         {
          height: swipeHeight;
        }
      "
    >
      <mt-swipe-item>
        <img src="/img/index/11.jpg" alt="" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/img/index/11.jpg" alt="" />
      </mt-swipe-item>
    </mt-swipe>
    <!-- 内容 -->
    <div id="div_2">
      <!-- 内容区域1 -->
      <table></table>
      <div class="p_span1">
        <div class="p_span2">
          <span class="p_span3">￥</span>
          <span class="p_span4">{{ proprice }}</span>
        </div>
        <div class="div_3">
          <span class="p_span5"></span>
          <span class="p_span6">{{ protitle }}</span>
        </div>
      </div>
      <!-- 内容区域2 -->
      <div class="new">
        <div class="div_4">
          <div class="div_5">
            <span class="p_title1">新机</span>
            <span class="p_title2">{{ protitle }}</span>
            <span class="p_title3">请选择规格</span>
          </div>
          <div class="div_6">
            <span class="p_title4">￥</span>
            <span class="p_title5">{{ proprice }}</span>
            <span class="p_title6"></span>
          </div>
        </div>
        <div class="div_4" v-show="!isShow">
          <div class="div_5">
            <span class="p_title1 p_titlejiuji">旧机</span>
            <span class="p_title2">{{ oldprotitle }}</span>
            <span class="p_title3">请选择规格</span>
          </div>
          <div class="div_6">
            <span class="p_title4">￥</span>
            <span class="p_title5">{{ oldproprice }}</span>
            <span class="p_title6" @click="delOldPro"></span>
          </div>
        </div>
      </div>
      <!-- 内容区域3 -->
      <div class="old" v-show="isShow">
        <div class="div_7">
          <span @click="addOldMachine">+添加更多旧机</span>
        </div>
      </div>
      <!-- 内容区域4 -->
      <div class="bonus">
        <div class="bonus-item">
          <div class="bonus-item-label">
            <span class="bonus-icon"></span>
            <span class="bonus-title">环保补助金</span>
          </div>
          <div class="bonus-item-value">
            <span class="value-icon">-￥</span>
            <span class="value-title">250</span>
          </div>
        </div>
      </div>
      <!--内容区域5 -->
      <div class="content">
        <div class="tabs">
          <span class="tabs-text active">基本参数</span>
          <span class="tabs-text">图文详情</span>
        </div>
        <div class="content-box">
          <div class="undefined">
            <table
              class="ke-zeroborder"
              cellspacing="0"
              bordercolor="#000000"
              border="0"
              cellpadding="0"
              style="text-align: center"
              width="100%"
            >
              <tbody>
                <tr class="td_1">
                  <td class style="text-align: left">分辨率：2340*1080</td>
                  <br />
                  <td class style="text-align: left">
                    机身厚度：薄（7mm-8.5mm）
                  </td>
                  <br />
                </tr>
                <tr>
                  <td class style="text-align: left">
                    后置摄像头：4800万+1600万+1200万像素
                  </td>
                  <br />
                  <td class style="text-align: left">
                    拍照特点：智能拍照，后置三摄
                  </td>
                  <br />
                </tr>
                <tr class="td_1">
                  <td class style="text-align: left">前置摄像头：2000万像素</td>
                  <br />
                  <td class style="text-align: left">内存：8+256GB</td>
                  <br />
                </tr>
                <tr>
                  <td class style="text-align: left">核 数：八核</td>
                  <br />
                  <td class style="text-align: left">电池容量：3000mAh-</td>
                  <br />
                </tr>
                <tr class="td_1">
                  <td class style="text-align: left">商品毛重：500.00g</td>
                  <br />
                  <td class style="text-align: left">
                    热点：人工智能，人脸识别，屏下指纹，快速充电，无线充电，NFC功能
                  </td>
                  <br />
                </tr>
                <tr>
                  <td class style="text-align: left">系统：安卓（Android）</td>
                  <br />
                  <td class style="text-align: left">
                    屏幕配置：符合全面屏比例，水滴屏
                  </td>
                  <br />
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 图片区域1 -->
        <div class="img1">
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615122628_56733.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615122628_35497.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615122629_65884.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615122629_67479.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615122629_62845.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615122629_23943.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615122629_83171.jpg"
            alt=""
          />
        </div>
        <!-- 图片区域2 -->
        <div class="img1">
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615123018_19988.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615123018_68423.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615123018_89161.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615123019_59191.jpg"
            alt=""
          />
          <img
            class="img"
            src="https://image.suhuishou.com/attached/image/20190615/20190615123019_42138.jpg"
            alt=""
          />
        </div>
      </div>
      <!-- 图片最底部 -->
      <div class="brand">
        <div class="brand-title"></div>
        <div class="brand-box">
          <!--  -->
          <div class="brand-box-item">
            <div class="brand-box-item-icon"></div>
            <span class="brand-box-item-text">官方授权</span>
            <span class="brand-box-item-text">正品自营</span>
          </div>
          <div class="brand-box-item">
            <div class="brand-box-item-icon"></div>
            <span class="brand-box-item-text">任意机型</span>
            <span class="brand-box-item-text">旧机抵扣</span>
          </div>
          <div class="brand-box-item">
            <div class="brand-box-item-icon"></div>
            <span class="brand-box-item-text">顺丰快递</span>
            <span class="brand-box-item-text">速度到家</span>
          </div>
          <div class="brand-box-item">
            <div class="brand-box-item-icon"></div>
            <span class="brand-box-item-text">专业回收</span>
            <span class="brand-box-item-text">保护隐私</span>
          </div>
        </div>
      </div>
      <!-- 底部询价 -->
      <div class="footer">
        <div class="footer-left">
          <div class="footer-left-bonus">
            <span class="footer-left-bonus-text">环保奖励金</span>
            <span class="footer-left-bonus-color"> -¥250</span>
          </div>
          <div class="footer-left-rate">
            <span class="footer-left-rate-text">旧机估价</span>
            <span class="footer-left-rate-color"> -¥{{ oldproprice }}</span>
          </div>
        </div>
        <div class="footer-right">
          <div class="footer-right-total">
            <span class="footer-right-total-amount">￥</span>
            <span class="footer-right-total-color">{{ renewPrice }}</span>
            <span class="footer-right-total-text">「0元换」额外赚</span>
          </div>
          <div>
            <button class="footer-right-btn">免费询价</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navactive: "1",
      swipeHeight: "0px",
      oldproprice: "",
      oldprotitle: "",
      // 换新价格
      renewPrice: 0,
      isShow: true,
    };
  },
  props: ["protitle", "proprice"],
  methods: {
    // 提出旧机
    delOldPro() {
      this.$messagebox({
        message: "确定移除旧机?",
        showCancelButton: true,
      }).then((action) => {
      if(action=="confirm"){
          sessionStorage.removeItem("oldprotitle");
        sessionStorage.removeItem("oldproprice");
        this.isShow = true;
      }
      });
    },
    addOldMachine() {
      this.$router.push("/oldpro");
    },
    /** 初始化轮播图的高度 */
    initSwipeHeight() {
      // 通过公式  计算轮播图应该设置的高度
      let picwidth = 690;
      let picheight = 345;
      let screenwidth = window.screen.width;
      let height = Math.floor((picheight * screenwidth) / picwidth) + "px";
      this.swipeHeight = height;
    },
  },
  mounted() {
    if (sessionStorage.getItem("oldprotitle")) {
      this.isShow = false;
    } else {
      this.isShow = true;
    }
    this.initSwipeHeight();
    this.oldproprice = sessionStorage.getItem("oldproprice");
    this.oldprotitle = sessionStorage.getItem("oldprotitle");
    this.renewPrice = this.proprice - this.oldproprice;
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.div_1 {
  width: 100%;
}
.p_tou {
  width: 100%;

  background: white;
  font-size: 18px;
  color: black;
}
.p_swipe {
  height: 400px;
  margin-top: 60px;
  margin-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.p_swipe img {
  width: 100%;
}
#div_2 {
  background: #f5f5f5;
}
.div_3 {
  position: relative;
  font-weight: 700;
  color: #333;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#div_2 div {
  background: #fff;
  border-radius: 10px;
  /* margin-left: 8px;
     margin-right: 8px; */
  margin-top: 5px;
  /* padding: 5px; */
}
.p_span1 {
  height: 104px;
  margin-top: 10px;
  background: #fff;
  margin-left: 8px;
  margin-right: 8px;
  padding: 5px;
}
.p_span3 {
  font-size: 5px;
  color: #f74444;
}
.p_span4 {
  font-size: 25px;
  color: #f74444;
}
.p_span5 {
  display: inline-block;
  width: 33px;
  height: 30px;
  background: url(https://image.suhuishou.com/attached/image/20191212/20191212104508_31292.png)
    no-repeat;
  background-size: 100%;
  position: absolute;
  left: 5px;
  top: 10px;
}
.p_span6 {
  margin-left: 43px;
  font-size: 20px;
  margin-top: 10px;
}
.new {
  margin-left: 8px;
  margin-right: 8px;
  padding: 10px;
}
.div_4 {
  display: flex;
  font-size: 12px;
  font-family: PingFang;
  font-weight: 500;
  color: #333;
  position: relative;
  font-size: 15px;
  background: #fff;
  padding: 5px;
}
.div_5 {
  width: 276px;
  display: flex;
  padding-left: 38px;
}
.p_title1 {
  /* width: 30px; */
  background: rgb(247, 68, 68);
  border-radius: 18px;
  font-size: 8px;
  font-family: AlibabaPuHuiTiR;
  font-weight: 400;
  display: inline-block;
  text-align: center;
  color: #fff;
  padding: 3px 5px;
  margin-right: 10px;
  position: absolute;
  top: 7px;
  left: 3px;
}
.p_titlejiuji {
  background: rgb(0, 225, 0);
}
.p_title2 {
  display: inline-block;
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 10px;
  font-size: 15px;
  padding-left: 5px;
}
.p_title3 {
  width: 135px;
  margin-right: 21px;
  margin-left: 18px;
}
.div_6 {
  text-align: right;
  width: 61px;
  font-weight: 700;
  font-family: PingFang;
  color: #f64444;
  font-size: 16px;
  margin-right: 7px;
}
.p_title4 {
  font-size: 8px;
}
.p_title6 {
  width: 10px;
  height: 15px;
  display: inline-block;
  background: url()
    no-repeat;
  background-size: 10px;
  position: absolute;
  margin-left: 2px;
}
.div_7 {
  text-align: center;
  background: #fff;
  padding: 5px;
}
.old {
  line-height: 30px;
  margin-left: 8px;
  margin-right: 8px;
  padding: 5px;
}
.bonus {
  background: #fff;
  border-radius: 0.34133rem;
  padding: 0.87467rem 0.55467rem;
  line-height: 20px;
  margin-left: 8px;
  margin-right: 8px;
}
.bonus-item {
  display: flex;
  font-size: 0.64rem;
  font-family: PingFang;
  font-weight: 500;
  color: #333;
  position: relative;
}
.bonus-item-label {
  width: 15rem;
  padding-left: 2.34667rem;
}
.bonus-icon {
  width: 25px;
  height: 25px;
  background: url(https://image.suhuishou.com/attached/image/20191213/20191213222555_92737.png)
    no-repeat;
  background-size: 100%;
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 4px;
}
.bonus-item-value {
  text-align: right;
  width: 60px;
  font-family: PingFang;
  font-weight: 700;
  color: #67ae32;
  margin-left: 30px;
}
.bonus-title {
  margin-left: 25px;
  font-size: 16px;
}
.value-icon {
  font-size: 12px;
}
.value-title {
  font-size: 17px;
}
.content {
  /* width: 360px; */
  margin-left: 8px;
  margin-right: 8px;
}
.tabs {
  /* width: 100%; */
  display: flex;
  margin-left: 8px;
  padding: 15px;
}
.content-box {
  padding-left: 0px;
}
.content .tabs-text {
  display: inline-block;
  width: 50%;
  text-align: center;
  font-size: 14px;
}
.content .tabs .active {
  color: #f74444;
}
/* .ke-zeroborder{
    border: 0;
    border-color: #000000;
    text-align: center;
    background: #f5f5f5;
    width: 357px; 
}  */
.content table {
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.content table tr td {
  height: 43px;
  line-height: 43px;
  width: 178px;
  overflow: hidden;
  font-size: 10px;
  padding-left: 10px;
  /* margin-left: -5px; */
}
.td_1 {
  background: #f8f8f8;
}
.img {
  width: 100%;
}
.brand {
  /* width: 355px; */
  background: #f5f5f5;
  margin: 10px !important;
  padding: 10px;
  margin-bottom: 80px !important;
}
.brand-title {
  width: 190px;
  height: 21px;
  background: url(https://image.suhuishou.com/attached/image/20191212/20191212113359_60680.png)
    no-repeat !important;
  background-size: 100% !important;
  margin-left: 87px !important;
}
.brand-box {
  display: flex;
  margin-top: 10px;
}
.brand-box-item {
  width: 25%;
  text-align: center;
}
.brand-box-item-icon {
  width: 30px;
  height: 30px;
  background: url(https://image.suhuishou.com/attached/image/20191212/20191212113347_62004.png)
    no-repeat !important;
  background-size: 270px !important;
  margin: 0 auto 8px;
}
.brand-box-item-text {
  font-size: 8px;
  font-family: PingFang;
  font-weight: 500;
  color: #333;
  line-height: 17px;
  display: block;
  text-align: center;
}
.img1 {
  width: 100%;
}
.footer {
  width: 100%;
  height: 70px;
  background: #fff;
  border-radius: 5px 5px 0 0;
  position: fixed;
  display: flex;
  bottom: 0;
  font-size: 9px;
  color: #999;
}
.footer-left {
  padding: 7px 10px 10px 24px;
}
.footer-left-bonus-color {
  color: #333;
}
.footer-left-rate {
  padding-top: 5px;
}
.footer-left-rate-text {
  width: 63px;
}
.footer-left-rate-color {
  color: #333;
  margin-left: 12px;
}
.footer-right {
  padding: 4px 5px 12px;
  display: flex;
  margin-left: 24px;
}
.footer-right-total {
  margin-top: 4px;
  padding-right: 12px;
}
.footer-right-total-amount {
  font-size: 10px;
  color: #f74444;
}
.footer-right-total-text {
  margin-top: 6px;
  display: block;
  color: #333;
}
.footer-right-total-color {
  font-size: 20px;
  color: #f74444;
}
.footer-right-btn {
  width: 97px;
  height: 43px;
  line-height: 43px;
  background: #f74444;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  border: 0;
  margin-left: 3px;
}
</style>
